import { defineComponent, markRaw } from 'vue'
import ItemNode from '../../ItemNode/ItemNode'
import Abc from './Abc.vue'
import AbcRaw from './Abc.vue?raw'

export default class CAbc extends ItemNode {
  isCustomNode = true

  constructor(node?: CAbc) {
    super(node)

    if (!node) {
      this.path = './customComponents/CAbc/CAbc.tsx'
      this.name = 'Abc'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              <Abc></Abc>
            </pComponent>
          )
        },
        {
          name: 'CAbc'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        return () => (
          <pView>
            <this.component style={{ transform: 'scale(1, 1)' }}></this.component>
          </pView>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    sfcObj.importFiles = {
      ...sfcObj.importFiles,
      'Abc.vue': AbcRaw
    }

    sfcObj.template = sfcObj.template.replace('<slot></slot>', `<Abc></Abc>`)

    return sfcObj
  }
}
